<template>
  <div>
    <div class="condition">
      <el-button
        type="primary"
        @click="add()"
      >添加菜单组</el-button>
    </div>
    <el-table
      :loading="loading"
      :data="data"
    >
      <el-table-column
        label="名称"
        prop="title"
      ></el-table-column>
      <el-table-column
        label="token"
        prop="token"
      >
        <template slot-scope="{row}">
          <el-button
            type="text"
            v-clipboard:copy="row.token"
            v-clipboard:success="copy"
          >{{row.token}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        prop="status"
      >
        <template slot-scope="{row}">
          <el-switch
            v-model="row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="setStatus(row.id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        prop="id"
      >
        <template slot-scope="{row}">

          <table-action
            :row="row"
            @deleteItem="action.deleteItem"
            @editItem="action.editItem"
            :deleteProps="action.deleteProps"
          >
            <template slot="left">
              <el-button
                type="primary"
                @click="view_menu(row)"
                plain
                size="mini"
              >
                查看菜单
              </el-button>
            </template>
          </table-action>

        </template>
      </el-table-column>
    </el-table>
    <page
      :total="total"
      :current.sync="params.page"
      :size.sync="params.size"
      @change="search"
    />
  </div>
</template>

<script>
import addPage from "./add_menu_group";
import editPage from "./edit_menu_group";
import { menuGroupSetStatus, menuGroupLists, deleteMenuGroup } from "@/api";
import Page from "@/components/page/index";
import tableAction from "@/components/table/action";
export default {
  components: { addPage, Page, tableAction },
  data() {
    return {
      data: [],
      loading: false,
      copyData: "",
      action:{
        deleteProps:{
          message:"该操作将删除菜单组及其关联菜单，确定删除?"
        },
        deleteItem:this.deleteIt,
        editItem:this.edit
      },
      addModal: {
        title: "添加菜单组",
        component: addPage,
        close: this.search
      },
      editModal: {
        title: "编辑菜单组",
        data: {
          id: 0
        },
        component: editPage,
        close: this.search
      },
      total: 0,
      params: {
        page: 1,
        size: 10
      }
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.loading = true;
      menuGroupLists(
        this.params,
        res => {
          if (res.code == 1) {
            this.data = res.data.data;
            this.total = res.data.total;
          }
        },
        err => {}
      );
    },

    add() {
      this.$uDialog(this.addModal);
    },
    setStatus(id) {
      this.loading = true;
      menuGroupSetStatus(id, res => {
        this.loading = false;
        this.search();
      });
    },
    copy(e) {
      this.$message.success("token已复制");
    },
    view_menu(row) {
      this.$emit("chosen", row);
    },
    edit(row) {
      this.editModal.data.id = row.id;
      this.editModal.title = "编辑-" + row.title;
      this.$uDialog(this.editModal);
    },
    deleteIt(id) {
      deleteMenuGroup(
          id,
          res => {
            this.$emit("destory", id);
            this.search();
          },
          err => {
          }
        );
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
